<template>
  <div>
    <div class="logo">
      <img src="../../assets/img/logo.png" alt="">
    </div>
     
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      unique-opened
      @select="handleSelect"
      @close="handleClose"
      background-color="#303133"
      text-color="#fff"
      active-text-color="#ffd04b">
      
      <el-submenu 
      v-for="(item, index) in menuList" 
      :index="index.toString()"
      :key="index"
      :class="{'single_nav': !item.children}"
      class="menu_item"
      >
        <template slot="title">
          <div @click="toRouter(item)" class="">
            <i class="menu_icon" :style="{backgroundImage:'url('+item.icon+')'}"></i>
            <span>{{item.label}}</span>
          </div>
        </template>
        <el-menu-item-group v-if="item.children">
          <el-menu-item
            v-for="(childItem, childIndex) in item.children" 
            :key="childIndex" :index="`/${childItem.name}`"
            @click="toRouter(childItem)"
          >
            {{childItem.label}}
          </el-menu-item>
        </el-menu-item-group>



      </el-submenu>
      
    </el-menu>

    <!-- <el-menu
      :default-active="$route.path"
      class="menu_item"
      @open="handleOpen"
      @close="handleClose"
      background-color="#303133"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu
        v-for="(item, index) in menuList" 
        :index="index.toString()"
        :key="index"
        v-if="item.children"
      >
        <template slot="title">
          <div @click="toRouter(item)" class="">
            <i class="menu_icon" :style="{backgroundImage:'url('+item.icon+')'}"></i>
            <span>{{item.label}}</span>
          </div>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-if="item.children"
            v-for="(childItem, childIndex) in item.children" 
            :index="`/${childItem.name}`"
            :key="childIndex"
          >
            {{childItem.label}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      
      <el-menu-item
        v-for="(item, index) in menuList" 
        :index="`/${item.name}`"
        :key="index"
        v-if="!item.children"
      >
        <span slot="title">{{item.label}}</span>
      </el-menu-item>
      
    </el-menu>-->
     
  </div>
</template>


<script>
import {
  mapState,
  mapMutations
} from 'vuex'

import axios from "axios";
export default {
  name: "leftNav",
  data() {
    return {
      activeIndex: "4",
    };

  },
  watch: {
    
  },
  created() {
  },
  mounted() {
    // console.log(this.menuList);
    // console.log(this.$route.path)
  },
  methods: {
    ...mapMutations([
      "updateInfo"
    ]),
    selectChange(key) {
      this.activeIndex = key;
      sessionStorage.setItem("menuKey", key);
    },

    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },

    toRouter(item) {
      if(item.name) {
        this.updateInfo(["activeMenuItem", item]);
        // console.log(this.activeMenuItem)
      }
      this.$router.push({
        name: item.name
      })
    },
    handleOpen(key, keyPath) {
      this.activeIndex = key;
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    }
  },
  computed: {
    ...mapState([
      "activeMenuItem",
    ])
  },
  destroyed() {
    sessionStorage.removeItem("menuKey");
  },
  props: ["menuList"]
};
</script>

<style>
.menu_item .el-icon-arrow-down{
  color: #FC8434 !important;
  font-size: 16px;
}
.el-menu-item{
  padding-left: 70px !important;
}
.menu_item .el-icon-arrow-down:before{
  content: "\e791" !important;
}

/*菜单关闭*/
.menu_item.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(0); 
	-ms-transform: rotate(0);
	transform: rotateZ(0); 
}
.menu_item.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	-webkit-transform: rotateZ(90deg); 
	-ms-transform: rotate(90deg);
	transform: rotateZ(90deg); 
}
</style>
<style lang="scss" scoped>

.menu_icon {
  vertical-align: middle;
  display: inline-block;
  text-align: center;
  font-size: 18px;
  margin-right: 18px;
  margin-left: 12px;
}
.menu_item .menu_icon{
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
}

// .menu_item:nth-child(1) .menu_icon {
//   width: 15px;
//   height: 16px;
//   background-size: 100%;
// }
// .menu_item:nth-child(2) .menu_icon {
//   width: 18px;
//   height: 14px;
//   margin-left: 10.5px;
//   background-size: 100%;
// }
// .menu_item:nth-child(3) .menu_icon {
//   width: 15px;
//   height: 16.5px;
//   background-size: 100%;
// }
// .menu_item:nth-child(4) .menu_icon {
//   width: 15px;
//   height: 16px;
//   background-size: 100%;
// }
// .menu_item:nth-child(5) .menu_icon {
//   width: 18px;
//   height: 14px;
//   margin-left: 10.5px;
//   background-size: 100%;
// }
// .menu_item:nth-child(6) .menu_icon {
//   width: 18px;
//   height: 16px;
//   margin-left: 11px;
//   background-size: 100%;
// }
// .menu_item:nth-child(7) .menu_icon {
//   width: 15px;
//   height: 18px;
//   background-size: 100%;
// }
// .menu_item:nth-child(8) .menu_icon {
//   width: 15px;
//   height: 17px;
//   background-size: 100%;
// }
// .menu_item:nth-child(9) .menu_icon {
//   width: 15px;
//   height: 15px;
//   background-size: 100%;
// }



.el-menu-item.is-active {
  background: #3a7ef7;
  color: #FC8434 !important;
}

.el-menu-item.is-active span {
  color: #fff;
}
.logo {
  margin: 10px;
}
.logo img {
  width: 100%;
}
</style>
